<template>
  <div class="common-layout">
    <el-container>

      <el-header>
        <el-menu
            :default-active="pages.home"
            class="el-menu-demo"
            mode="horizontal"
            router="true">
          <!-- 左侧菜单项 -->
          <div class="menu-left">
            <img alt="" src="../../assets/imgs/logo.png" style="width: 40px">
            <el-menu-item :index='pages.home'>首页</el-menu-item>
            <el-menu-item :index='pages.shop'>商城
              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right">
                    <arrow-down/>
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="navigateToSellerCenter">卖家中心</el-dropdown-item>
                    <el-dropdown-item @click="navigateToShopingCart">我的购物车</el-dropdown-item>
                    <el-dropdown-item @click="navigateToOrderCenter">订单中心</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-menu-item>
          </div>

          <!-- 登录的操作栏-->
          <div v-if="data.user === null" class="menu-right">
            <el-menu-item>
              <el-link href="/login">登录</el-link>
            </el-menu-item>
            <span>|</span>
            <el-menu-item>
              <el-link href="/register">注册</el-link>
            </el-menu-item>
          </div>
          <div v-else class="menu-right">
            <img style="width: 40px; height: 40px; border-radius: 50%"
                 :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"/>
            <el-dropdown>
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right">
                    <arrow-down/>
                  </el-icon>
                </span>
              <template #dropdown>
                <div v-if="data.user.role !== 'ADMIN'">
                  <el-dropdown-menu>
                    <el-dropdown-item @click="navigateTo('COMMON-USER')">个人中心</el-dropdown-item>
                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </div>
                <div v-else>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="navigateTo('ADMIN')">后台管理中心</el-dropdown-item>
                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </div>
              </template>
            </el-dropdown>
          </div>
        </el-menu>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";
import {expiration, setToExpireLocalStroage} from "@/utils/LocalStroageUtil";

// 页面首页
const pages = reactive({
  'home': '/home',
  'shop': '/shop',
  'forum': '/forum',
  'financing': '/financing',
})

// 登录的个人信息
const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user'))
})

// 卖家中心
const navigateToSellerCenter = () => {
  router.push('/SELLER')
}
//购物车
const navigateToShopingCart = () => {
  router.push('/COMMON-USER/shoppingCar')
}
//进入订单中心
const navigateToOrderCenter = () => {
  router.push('/COMMON-USER')
}

// 导航跳转
function navigateTo(navigate) {
  router.push('/' + navigate)
}

const logout = () => {
  localStorage.removeItem('system-user')
  ElMessage.success('退出成功')
  setTimeout(() => {
    window.location.reload();
  }, 500);  // 延迟 500 毫秒
}

// 设置过期
setToExpireLocalStroage(expiration)
</script>

<style scoped>
.el-menu-demo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 20px; /* 控制菜单项之间的间距 */
}

.menu-left .el-menu-item {
  font-size: 18px; /* 增大字体 */
  padding: 0 20px; /* 增加左右内边距 */
}

/**
利用伪类元素给选中菜单添加下划线
 */
.menu-left .el-menu-item.is-active {
  position: relative;
}

.menu-left .el-menu-item.is-active::after {
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #409EFF; /* 下划线的颜色，可以根据需要调整 */
}

.menu-right {
  display: flex;
  align-items: center;
}

.common-layout {
  overflow: hidden;
}

.el-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-main {
  margin-top: 60px;
  padding: 20px;
}

a {
  font-size: 14px;
}

span {
  margin: 0 8px;
}
</style>
